<template>
  <ElSelect :model-value="selectValue" :style="{ width }" multiple :value-key="props.value" :disabled="disabled">
    <template #empty>
      <div class="px-5 pb-5">
        <ElInput v-model="keyword" @input="onSearch" size="small" placeholder="请输入搜索" clearable />
      </div>
      <ElTreeV2 :data="data" ref="treeRef" :props="props" :filter-method="filterMethod" v-loading="loading"
        class="el-tree-warpper" @check="onNodeCheck" :style="{ width: popWidth }" v-bind="$attrs">
        <template #default="{ node }">
          <slot name="default" :node="node"> {{ node.label }} </slot>
        </template>
      </ElTreeV2>
    </template>
    <template #tag>
      <span v-if="!multiple">{{ modelValue?.[props.label] }}</span>
      <div v-else>待完成</div>
    </template>
  </ElSelect>
</template>

<script setup>
import { watchEffect, toRefs, ref, computed } from 'vue'

defineOptions({
  inheritAttrs: false
})
const modelValue = defineModel()
const selectValue = computed(() => {
  if (Array.isArray(modelValue.value) || !modelValue.value) {
    return modelValue.value
  }
  return [modelValue.value]
})
const rootProps = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  width: {
    type: String,
    default: '200px'
  },
  popWidth: {
    type: String,
    default: '200px'
  },
  height: {
    type: Number,
    default: 208
  },
  props: {
    type: Object,
    default: () => ({
      value: 'id',
      label: 'label',
      children: 'children',
      disabled: 'disabled'
    })
  },
  loading: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  multiple: {
    type: Boolean,
    default: false
  },
  multipleLimit: {
    type: Number,
    default: null
  }
})
const { props, multiple, multipleLimit, data } = toRefs(rootProps)

const keyword = ref()

const treeRef = ref()

const onSearch = (value) => {
  treeRef.value.filter(value)
}

const filterMethod = (query, node) => {
  return node[props.value.label]?.toLowerCase()?.includes(query?.toLowerCase())
}

const onNodeCheck = (_data, { checkedNodes }) => {
  if (multiple.value && checkedNodes.length <= multipleLimit.value) {
    modelValue.value = checkedNodes
  } else {
    // 单选逻辑
    if (checkedNodes.length === 2) {
      treeRef.value.setCheckedKeys([checkedNodes[1][props.value.value]])
      modelValue.value = checkedNodes[1]
    } else {
      modelValue.value = checkedNodes[0]
    }
  }
}

watchEffect(() => {
  if (
    !modelValue.value ||
    (Array.isArray(modelValue.value) && !modelValue.value?.length) ||
    !data.value.length
  ) {
    return
  }
  let keys = []
  if (multiple.value) {
    keys = modelValue.value.map((itr) => itr[props.value.value])
  } else {
    keys = [modelValue.value[props.value.value]]
  }
  const timer = setTimeout(() => {
    treeRef.value.setCheckedKeys(keys)
    clearTimeout(timer)
  }, 0)
})
</script>
<style lang="scss" scoped>
.el-tree-warpper {
  :deep() {
    .el-vl__wrapper {
      width: 100%;

      .el-vl__window.el-tree-virtual-list {
        overflow: scroll;
        width: 200px;

        &>div {
          width: 600px !important;
          /* width: fit-content!important; */
          /* overflow-x: scroll; */
        }

        .el-tree-node.is-focusable,
        .el-tree-node .el-tree-node__content {
          width: fit-content !important;
        }
      }
    }
  }
}
</style>
